Parent এবং Child Data Visualization হল একটি কনসেপ্ট যেখানে আপনি একাধিক সম্পর্কিত ডেটা সেটের মধ্যে সম্পর্ক প্রদর্শন করতে চান। এটি প্রায়শই hierarchical (পদে পদে সম্পর্কিত) ডেটা উপস্থাপনা করতে ব্যবহৃত হয়, যেমন Parent-Child Relationship।

Google Charts API এবং Angular ব্যবহার করে, আপনি Parent এবং Child ডেটা সম্পর্কের ভিজুয়ালাইজেশন করতে পারেন। এখানে, আমরা TreeMap এবং Org Chart এর মত বিভিন্ন চার্ট ব্যবহার করে এই কনসেপ্টটি বুঝাবো।

1. TreeMap Chart (ট্রি ম্যাপ চার্ট)

TreeMap চার্ট একটি হায়ারার্কিকাল ডেটার ভিজুয়ালাইজেশন প্রকার, যেখানে আপনি প্যারেন্ট এবং চাইল্ড ডেটা হায়ারার্কির মাধ্যমে প্রদর্শন করতে পারেন। এতে প্যারেন্ট আইটেমগুলির জন্য বড় ব্লক এবং চাইল্ড আইটেমগুলির জন্য ছোট ব্লক ব্যবহৃত হয়।

TreeMap Chart উদাহরণ

ধরা যাক, আমরা একটি TreeMap Chart তৈরি করতে চাই, যেখানে একটি কোম্পানির বিভাগের মধ্যে কর্মী এবং তাদের পারফরম্যান্সের সম্পর্ক দেখানো হবে।

app.component.ts ফাইল:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Parent and Child Data Visualization';

  chartType = 'TreeMap'; // Chart Type: TreeMap

  chartData = [
    ['ID', 'Parent', 'Name', 'Value'],
    ['1', null, 'Company', 0],
    ['2', '1', 'Sales', 10],
    ['3', '1', 'Marketing', 5],
    ['4', '2', 'Inside Sales', 4],
    ['5', '2', 'Outside Sales', 6],
    ['6', '3', 'Digital Marketing', 4],
    ['7', '3', 'Traditional Marketing', 1]
  ];  // TreeMap Data: Parent and Child Relationship

  chartOptions = {
    title: 'Company Organizational Structure',
    minColor: '#f0f0f0',
    midColor: '#ffff00',
    maxColor: '#ff0000',
    headerColor: '#cccccc',
    fontColor: 'black',
    fontSize: 14,
    width: 600,
    height: 400
  };
}

app.component.html ফাইল:

<h1>{{ title }}</h1>

<!-- Google Chart (TreeMap) -->
<google-chart 
  [type]="chartType" 
  [data]="chartData" 
  [options]="chartOptions">
</google-chart>

এখানে:

• Parent-Child Relationship: Company হলো প্যারেন্ট আইটেম এবং তার অধীনে Sales এবং Marketing শিশু বিভাগের তথ্য রয়েছে।
• Value: এখানে প্রতিটি বিভাগ এবং কর্মীর জন্য কিছু মূল্য নির্ধারণ করা হয়েছে, যা তাদের আকার বা গুরুত্ব নির্দেশ করে।

Chart Output:

এটি একটি TreeMap চার্ট তৈরি করবে যেখানে কোম্পানির বিভাগগুলি হায়ারার্কিক্যালভাবে প্রদর্শিত হবে এবং তাদের সম্পর্ক দেখা যাবে।

2. Org Chart (অর্গানাইজেশন চার্ট)

Org Chart একটি হায়ারার্কিকাল চার্ট যা প্রতিষ্ঠানের মধ্যে বিভিন্ন স্তরের সম্পর্ক প্রদর্শন করতে ব্যবহৃত হয়। এটি বিশেষ করে Parent-Child Relationship দেখানোর জন্য আদর্শ।

Org Chart উদাহরণ

ধরা যাক, আমরা একটি কোম্পানির Org Chart তৈরি করতে চাই, যেখানে ম্যানেজারদের অধীনে তাদের টিম সদস্যদের সম্পর্ক দেখানো হবে।

app.component.ts ফাইল:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Company Org Chart';

  chartType = 'OrgChart';  // Chart Type: Org Chart

  chartData = [
    ['Name', 'Manager', 'ToolTip'],
    ['John', '', 'CEO'],
    ['Sarah', 'John', 'VP Sales'],
    ['Mike', 'Sarah', 'Sales Manager'],
    ['David', 'Sarah', 'Marketing Manager'],
    ['James', 'Mike', 'Sales Representative'],
    ['Paul', 'Mike', 'Sales Representative']
  ];  // Org Chart Data: Parent and Child Relationship

  chartOptions = {
    title: 'Company Organization Chart',
    width: 600,
    height: 400,
    allowHtml: true
  };
}

app.component.html ফাইল:

<h1>{{ title }}</h1>

<!-- Google Chart (Org Chart) -->
<google-chart 
  [type]="chartType" 
  [data]="chartData" 
  [options]="chartOptions">
</google-chart>

এখানে:

• Parent-Child Relationship: John (CEO) হলো প্যারেন্ট, এবং তার অধীনে Sarah (VP Sales), Mike (Sales Manager), James এবং Paul (Sales Representatives) রয়েছেন।
• ToolTip: একটি tooltip তৈরি করা হয়েছে, যা মাউস হোভার করলে প্রতিটি পজিশনের নাম দেখাবে।

Chart Output:

এটি একটি Org Chart তৈরি করবে, যেখানে কোম্পানির ম্যানেজার এবং তাদের অধীনে কর্মীরা হায়ারার্কিক্যালভাবে প্রদর্শিত হবে।

3. Google Charts এ Parent-Child Data Visualization কাস্টমাইজেশন

আপনি TreeMap এবং OrgChart কাস্টমাইজ করতে পারেন যেভাবে আপনি চাইবেন, যেমন:

• Color Customization: আপনি বিভিন্ন প্যারেন্ট এবং চাইল্ড আইটেমের জন্য ভিন্ন রঙ ব্যবহার করতে পারেন।
• Size Customization: প্রতিটি আইটেমের সাইজ বা ভ্যালু কাস্টমাইজ করতে পারেন।
• Tooltip: প্যারেন্ট এবং চাইল্ড সম্পর্কের বিস্তারিত তথ্য দেখানোর জন্য টুলটিপ কাস্টমাইজ করতে পারেন।

Example of Customizing Colors and Tooltips

chartOptions = {
  title: 'Custom Org Chart',
  width: 600,
  height: 400,
  allowHtml: true,
  nodeClass: 'node-class',  // Custom CSS Class for nodes
  tooltip: { isHtml: true },  // Enable HTML tooltips
  chartArea: { width: '80%', height: '80%' },
  colors: ['#ff0000', '#00ff00', '#0000ff', '#ff9900']
};

এখানে:

• tooltip: HTML টুলটিপ সক্রিয় করা হয়েছে।
• colors: বিভিন্ন নোডের জন্য রঙ নির্ধারণ করা হয়েছে।

সারাংশ

Parent-Child Data Visualization হচ্ছে ডেটার মধ্যে হায়ারার্কিক্যাল সম্পর্ক প্রদর্শন করা। আপনি Google Charts API ব্যবহার করে সহজেই TreeMap এবং Org Chart তৈরি করতে পারেন, যা প্যারেন্ট এবং চাইল্ড ডেটার সম্পর্ক দেখাতে সহায়তা করে। এই চার্টগুলি দৃষ্টি আকর্ষণীয় এবং ইন্টারঅ্যাকটিভ হওয়ায় ডেটা ভিজুয়ালাইজেশন আরো কার্যকরী হয়।